<template>
  <div class="draggable-notice" :style="{ backgroundColor }">
    <div class="draggable-notice-box">
     <span class="iconfont icon-xiaolaba"></span>
      <p class="marquee" :style="{ color: textColor }">{{ msg ? msg : '请输入公告内容，内容超长，文字会进行横向滚动！' }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DraggableNotice',
    props: {
      msg: {
        type: String,
        default: ''
      },
      backgroundColor: {
        type: String,
        required: true
      },
      textColor: {
        type: String,
        required: true
      }
    }
  }
</script>

<style lang="less" scoped>
  .draggable-notice{
    background: #CC9933;
    .draggable-notice-box{
      width: 375px;
      height: 100%;
      .icon-xiaolaba{
        font-size: 30px;
        float: left;
        color: #FFA07A;
      }
      .marquee {
        width: 90%;
        height: 100%;
        overflow: hidden;
        padding-top: 12px;
        font-size: 12px;
      }
    }
  }
</style>
